<template>
  <div class="login">
    <div class="login-from">
      <div class="title">欢迎登录</div>
      <el-form ref="form" :model="form" :rules="rules" class="flex-column">
        <el-form-item prop="mobile">
          <div class="flex-row align-items-center justify-content-center">
            <i class="el-icon-mobile-phone" style="font-size:22px;"></i>
            <el-input v-model="form.mobile" :maxlength="11" placeholder="请输入手机号" style="width:60%;"></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="flex-row align-items-center justify-content-center">
            <i class="el-icon-lock" style="font-size:22px;"></i>
            <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入密码"
              style="width:60%;"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item style="height:30px;width:60%;">
          <div class="flex-row align-items-center" style="width:100%;margin:0 auto;">
            <div style="width:100%;">
              <el-switch v-model="rememberVal" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              <span style="margin-left:10px;">记住密码</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="flex-row align-items-center justify-content-around">
            <div class="flex-row align-items-center justify-content-center">
              <i class="el-icon-unlock" style="font-size:16px;"></i>
              <router-link :to="{path:'/reset-password'}" target="_blank">忘记密码</router-link>
            </div>
            <div class="flex-row align-items-center justify-content-center">
              <i class="el-icon-user" style="font-size:16px;"></i>
              <router-link :to="{path:'/registered'}" target="_blank">账号注册</router-link>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')" class="login-btn">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      form: {
        mobile: '',
        password: ''
      },
      rules: {
        mobile: [
          {
            required: true,
            message: '请输入正确的手机号码',
            trigger: 'blur',
            pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
          },
          { min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      rememberVal: true
    }
  },
  computed: {},
  created () {
    if (localStorage.getItem('code') !== '' && localStorage.getItem('code') !== null) {
      this.http.getRsaDecrypt(localStorage.getItem('code')).then(res => {
        // console.log(res)
        if (res.data.errno == '000') {
          this.form.mobile = res.data.result.data.substring(7, 18)
          this.form.password = res.data.result.data.substring(23, res.data.result.data.length)
        }
      }).catch(err => {})
    }
  },
  mounted () {},
  watch: {},
  methods: {
    onSubmit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.webLogin()
        } else {
          // console.log('error submit!!');
          return false
        }
      })
    },
    webLogin () {
      let codeStr = `mobile=${this.form.mobile}&pwd=${this.form.password}&is_web=1`
      // 加密参数
      this.$getCode(codeStr)
        .then(rsaCode => {
          // 登录
          this.http
            .webLogin(rsaCode)
            .then(res => {
              if (res.data.errno === '000') {
                this.$message({
                  type: 'success',
                  message: '登录成功!'
                })
                if (this.rememberVal) {
                  let codeStr = `mobile=${this.form.mobile}&pwd=${this.form.password}`
                  this.$getCode(codeStr).then(code => {
                    localStorage.setItem('code', code)
                  })
                } else {
                  localStorage.setItem('code', '')
                }
                sessionStorage.setItem('token', res.data.result.data.auth)
                sessionStorage.setItem('u', res.data.result.data.uuid)
                sessionStorage.setItem('level', res.data.result.data.level)
                sessionStorage.setItem('grade_expire_time', res.data.result.data.grade_expire_time)
                sessionStorage.setItem('id', res.data.result.data.id)
                this.$store.commit('Member/pushCollects', res.data.result.data.id)
                // console.log(this.$store.state.Member)
                this.$router.push({
                  path: '/index'
                })
              } else {
                this.$message({
                  type: 'error',
                  message: res.data.errmsg
                })
              }
              // //console.log(res.data);
            })
            .catch(err => {
              // console.log(err);
            })
        })
        .catch(err => {
          // console.log(err);
        })
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
</style>

<style>
.el-form-item__error {
  /* width: 100%; */
  text-align: center;
}
</style>
